<!--新建合同-->
<section class="plr-24 newCt-1" id="ct-creat1">
    <!-- 基础信息 -->
    <section>
        <div class="clearfix line-height-56 border-b">
            <p class="line-height-56 pull-left">合同管理 - 新建合同 - 基础信息</p>
        </div>
        <div class="reletbox" v-if="mCode != 'undefined' && mCode" >
            <div>续</div>
            <span>原合同管理编号：</span>
            <a target="_blank" :href="'#/contractNewDeatil?id='+contractId+'&ddtab=true&relet=true'">{{mCode}}</a>
        </div>
    
        <div class="number">
            <span class="pr-24">管理编号：</span>
            <span>{{zlfData.m_code}}</span>
        </div>
        <div class="mb-10">
            <span class="pr-24">合同编号：</span>
            <input type="text" class="form-control ct-number-ipt" v-model="zlfData.c_code">
        </div>
        <div class="mb-10">
            <span class="pr-24">合同名称：</span>
            <input type="text" class="form-control ct-number-ipt" v-model="zlfData.name">
        </div>
        <div class="mb-10 contract-memo clearfix">
            <div class="memo-name">备注：</div>
            <textarea class="form-control contract-memo-textarea" name="name" rows="6" cols="80"
                v-model="zlfData.memo"></textarea>
        </div>
        <div class="sperate-line"></div>
    </section>

    <!-- 乙方信息 -->
    <section class="rent-container">
        <form id="renter-mes-form">
            <h3 class="title">乙方</h3>
            <div class="row mb-10">
                <div class="col-xs-1 pr-0" style="width:120px;"><span class="required">*</span>租赁方：</div>
                <div class="col-xs-10 js-rent-method">
                    <span :class="{'hl-radio':true, 'mr-10': true, active:zlfType.active == item.type}"
                        v-for="item in zlfType.list" @click="selcp(item.type)">{{item.name}}</span>
                </div>
            </div>

            <div class="row mb-10">
                <div class="col-xs-1 pr-0 js-cy-name line-height-34" style="width:120px;"><span
                        class="required">*</span>客户名称：
                </div>
                <div class="col-xs-3 relative">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_name"
                        @input="inputCname" @blur="zlfname">
                    <ul class="append-temp absolute bg-fff border z-998 line-height-34"
                        style="left:15px; top:35px; max-height:200px; overflow-y:scroll; width: 88%; text-indent:0.8em;"
                        v-if="customersFlag">
                        <li v-for="item in customers" @click="setClickCname(item)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;"><span
                        class="required">*</span>所属行业：
                </div>
                <div class="col-xs-3 pr-0">
                    <div class="select-ul" id="industry-st">
                        <span
                            class="select-name br-4 box-i-shadow">{{industryTypes.name ? industryTypes.name : '请选择'}}</span>
                        <ul>
                            <li v-for="item in industryTypes.list" @click="setiType(item.dictCode, item.dictName)">
                                {{item.dictName}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 公司租赁  -->
            <div class="row mb-10" v-if="zlfType.active === 'C'">
                <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>纳税人识别号：
                </div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.idcode"
                        @blur="validateIDcode('C')">
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34 email-ipt" style="width:120px;">公司邮箱：</div>
                <div class="col-xs-3 pr-0">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.email"
                        @blur="validateEmail()">
                </div>
            </div>

            <!-- 个人租赁  -->
            <div class="row mb-10" v-if="zlfType.active === 'P'">
                <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>身份证号：
                </div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.idcode"
                        @blur="validateIDcode('P')">
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34 email-ipt" style="width:120px;">个人邮箱：</div>
                <div class="col-xs-3 pr-0">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.email"
                        @blur="validateEmail()">
                </div>
            </div>

            <div class="row mb-10">
                <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span
                        style="padding-left:5px;"></span>法人：</div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_lperson"
                        @blur="zlfperson(1)">
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;">联系电话：</div>
                <div class="col-xs-3 pr-0">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_lphone">
                </div>
            </div>

            <div class="row mb-10">
                <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>联系人：</div>
                <div class="col-xs-3">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_sperson"
                        @blur="zlfperson(2)">
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;"><span
                        class="required">*</span>联系电话：
                </div>
                <div class="col-xs-3 pr-0">
                    <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_sphone">
                </div>
            </div>
						
						<div class="row mb-10">
						    <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span style="color: #fff;">*</span>通讯地址：
						    </div>
						    <div class="col-xs-8 pr-0 contract-address">
						        <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_address">
						    </div>
						</div>

            <div class="row mb-20">
                <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>渠道分类：
                </div>
                <div class="col-xs-3 pr-0">
                    <div class="select-ul" id="channelType-st">
                        <span class="select-name br-4 box-i-shadow"
                            ref="channelTypeHtml">{{channelType.selected.name ? channelType.selected.name : '请选择'}}</span>
                        <ul>
                            <li v-for="item in channelType.list"
                                @click="selectChannelType(item.dictCode, item.dictName)" v-if="item.status == 'Y'">
                                {{item.dictName}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;"><span
                        style="color:#fff;">*</span>渠道名称：</div>
                <div class="col-xs-3 pr-0">
                    <web-channel :code="channelType.selected.code" :value="channelName.selected.name"
                        @on-change="selectChannelName"></web-channel>
                </div>
            </div>

            

            <div class="sperate-line"></div>
        </form>
    </section>
    <!-- 中介信息 -->
    <div class="border-b pb-10 hl-global-detail-box" v-if="mediationData">
        <h3 class="title">中介</h3>
        <div class="hl-row">
          <div class="hl-row-item" style="width: 100%;">
            <div class="title">中介名称：</div>
            <div class="item">{{mediationData.channelCategoryName}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item">
            <div class="title">转介人：</div>
            <div class="item">{{mediationData.intermediaryName}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">联系方式：</div>
            <div class="item">{{mediationData.intermediaryPhone}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item" v-if="mediationData.intermediaryType != 'C'">
            <div class="title">身份证号：</div>
            <div class="item">{{mediationData.intermediaryIdCode}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">通讯地址：</div>
            <div class="item">{{mediationData.intermediaryAddress}}</div>
          </div>
        </div>
      </div>


    <!-- 自定义字段 -->
    <div class="mt-15">
        <hl-custom-fileds type="CONTRACT" :data="tmpData" v-model="resData"></hl-custom-fileds>
    </div>

    <!-- 房源信息 -->
    <section>
        <h3 class="color-999">房源信息</h3>
        <div class="row mb-10 hl-34">
            <div class="col-xs-1 pr-0" style="width:92px;"><span class="required">*</span>合同类型：</div>
            <div class="col-xs-10 js-rent-method">
                <span :class="{'hl-radio': 1, 'active': item.type == contactType.active, 'mr-10': 1}"
                    @click="setContactType(item.type)" v-for="item in contactType.list">{{item.name}}</span>
            </div>
        </div>
        <div class="row mb-10 hl-34">
            <div class="col-xs-1 pr-0" style="width:92px;"><span class="required">*</span>签约项目：</div>
            <div>
                <div class="select-ul" id="pro-st">
                    <span
                        class="select-name br-4 box-i-shadow">{{projectInfo.project_name ? projectInfo.project_name : '请选择项目'}}</span>
                    <ul>
                        <li v-for="(item, index) in projects.list"
                            @click="getProjectsId(item.projectId, item.projectName, item.contractNoPrefix, item.contractNamePrefix)">
                            {{item.projectName}}</li>
                    </ul>
                </div>
            </div>
            <hl-button type="primary" v-if="contactType.active == 'ER'" @on-click="getBuildings(1)"
                icon="icon-Org-account">
                添加单元</hl-button>
            <hl-button type="primary" v-if="contactType.active == 'WR'" @on-click="getBuildings(2)"
                icon="icon-Org-account">
                添加工位</hl-button>
            <hl-button type="primary" @on-click="getBuildings(3)" icon="icon-Org-account">添加车位</hl-button>
        </div>
        <div v-if="projectInfo.unitFlag && contactType.active == 'ER' && unitData.length">
            <div class="title">签约单元({{unitData.length}})</div>
            <ul class="unit-container border">
                <li class="dy-flex title border-b gradient-color">
                    <div class="dy-fx-5">楼宇</div>
                    <div class="dy-fx-2">楼层</div>
                    <div class="dy-fx-2">单元</div>
                    <div class="dy-fx-3">面积(m²)</div>
                    <div class="dy-fx-2">操作</div>
                </li>
                <li class="dy-flex content-item border-b" v-for="(item, index) in unitData">
                    <div class="dy-fx-5">{{item.building_name}}</div>
                    <div class="dy-fx-2">{{item.floor_name || '--'}}</div>
                    <div class="dy-fx-2">{{item.unit_name}}</div>
                    <div class="dy-fx-3 overflow">
                        <input type="text" v-model="item.unit_acreage"
                            style="width:100%; height:100%; border:0; outline:medium" class="text-center">
                    </div>
                    <div class="dy-fx-2">
                        <span class="icon-Gm-delete-2 color-999" @click="delUnit(index)"></span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="contactType.active == 'WR' && projectInfo.wpFlag && wpData.length">
            <div class="title">签约工位({{wpNum}})</div>
            <ul class="position-container">
                <li class="dy-flex title border-b gradient-color">
                    <div class="dy-fx-4">楼宇</div>
                    <div class="dy-fx-1">楼层</div>
                    <div class="dy-fx-1">单元</div>
                    <div class="dy-fx-1">工位数</div>
                    <div class="position-item">工位清单</div>
                </li>
                <li class="dy-flex content-item" v-for="(item, index) in wpData">
                    <div class="dy-fx-4">{{item.building_name}}</div>
                    <div class="dy-fx-1">{{item.floor_name || '--'}}</div>
                    <div class="dy-fx-1">{{item.unit_name}}</div>
                    <div class="dy-fx-1">{{item.stop ? item.stop.length : '0'}}</div>
                    <div class="position-item">
                        <span class="position">
                            <span v-for="(list, now) in item.stop" @click="delwp(index, now)">
                                {{list.stop_name}}
                                <i class="icon-Gm-delete-2"></i>
                            </span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="projectInfo.stFlag && stData.length">
            <div class="title">签约车位({{stNum}})</div>
            <ul class="position-container">
                <li class="dy-flex title border-b gradient-color">
                    <div class="dy-fx-4">楼宇</div>
                    <div class="dy-fx-1">楼层</div>
                    <div class="dy-fx-1">单元</div>
                    <div class="dy-fx-1">车位数</div>
                    <div class="position-item">车位清单</div>
                </li>
                <li class="dy-flex content-item" v-for="(item, index) in stData">
                    <div class="dy-fx-4">{{item.building_name}}</div>
                    <div class="dy-fx-1">{{item.floor_name || '--'}}</div>
                    <div class="dy-fx-1">{{item.unit_name}}</div>
                    <div class="dy-fx-1">
                        {{item.stop ? item.stop.length : '0'}}
                    </div>
                    <div class="position-item">
                        <span class="position">
                            <span v-for="(list, now) in item.stop" @click="delst(index, now)">
                                {{list.stop_name}}
                                <i class="icon-Gm-delete-2"></i>
                            </span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="sperate-line"></div>
    </section>
    <section>
        <!-- icon-Nav-contract-file -->
        <h3 class="color-999">相关文件</h3>
        <div class="flexbox">
            <div style="width:92px;padding-left:5px;">文件列表：</div>
            <hl-button @on-click="uploadFile">上传文件</hl-button>
        </div>
        <ul class="fileList">
            <li v-for="(item,index) in fileList" style="margin:0 80px 10px 0">
                <span class="icon-Nav-contract-file"></span>
                <span class="fileName">{{item.name}}</span>
                <span class="icon-Gm-delete-2" @click="delFileItem(index)"></span>
            </li>
        </ul>
        <div class="sperate-line"></div>
    </section>
    <!-- #/contractNew2 -->
    <div class="ptb-10">
        <hl-button type="primary" @on-click="nextData">下一步</hl-button>
    </div>

    <!-- 添加车位弹出层 -->
    <section class="pop" v-if="bounced.stFlag">
        <div class="head-pop font-16"><span class="title">添加车位</span>
            <button class="fw-close absolute" @click="queryAddst">×</button>
        </div>
        <div class="content border-b">
            <!-- 选择容器 -->
            <div class="clearfix select-row">
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mr-10"><span class="required">*</span>楼宇：</div>
                    <div class="pull-left building-select">
                        <div class="select-ul st-name">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="item in projects.builddata" @click="getBuildId(item.buildingId, item.names)">
                                    {{item.names}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mlr-10"><span class="required">*</span>楼层：</div>
                    <div class="pull-left floor-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="(item, index) in projects.floorsdata"
                                    @click="getStWp(item.floorId, item.floor,item.floorName)">{{item.floorName || '--'}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mlr-10"><span class="required">*</span>单元：</div>
                    <div class="pull-left unit-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="(item, index) in projects.unitdata" v-if="item.unitType == 'ST'"
                                    @click="getswDt(item.unitId, item.unitName, index)">{{item.unitName}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hl-button size="mini" class="ml-10">查询</hl-button>
            </div>
            <!-- 内容 -->
            <div class="clearfix table">
                <div class="tb-title clearfix pull-left" style="width:62px;">
                    <div class="position">车位</div>
                </div>
                <ul class="tb-content pull-left" style="width:706px;">
                    <li class="tb-item clearfix pt-10">
                        <div class="position st-unit st-list">
                            <span v-for="(item, index) in projects.stWpdata"
                                @click="selUnitSt($event, index, item.positionId, item.positionName, item)"
                                :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
                                :data-posId="item.positionId" v-if="item.rentState != 'ZY'">
                                {{item.positionName.length > 9 ? item.positionName.substr(0,8)+'...' : item.positionName}}
                                <i class="icon-Nav-contract-choice selected-icon"></i>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="button-container">
            <hl-button type="primary" @on-click="querysAdd(3)">确认添加</hl-button>
        </div>
    </section>

    <!-- 添加工位弹出层 -->
    <section class="pop" v-if="contactType.active == 'WR' && bounced.wpFlag">
        <div class="head-pop font-16"><span class="title">添加工位</span>
            <button class="fw-close absolute" @click="queryAddwp">×</button>
        </div>
        <div class="content border-b">
            <!-- 选择容器 -->
            <div class="clearfix select-row">
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mr-10"><span class="required">*</span>楼宇：</div>
                    <div class="pull-left building-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="item in projects.builddata" @click="getBuildId(item.buildingId, item.names)">
                                    {{item.names}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mlr-10"><span class="required">*</span>楼层：</div>
                    <div class="pull-left floor-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="(item, index) in projects.floorsdata"
                                    @click="getStWp(item.floorId, item.floor,item.floorName)">{{item.floorName || '--'}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mlr-10"><span class="required">*</span>单元：</div>
                    <div class="pull-left unit-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="(item, index) in projects.unitdata" v-if="item.unitType == 'WP'"
                                    @click="getswDt(item.unitId, item.unitName, index)">{{item.unitName}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hl-button size="mini" class="mr-10">查询</hl-button>
            </div>
            <!-- 内容 -->
            <div class="clearfix table">
                <div class="tb-title clearfix pull-left" style="width:62px;">
                    <div class="position">工位</div>
                </div>
                <ul class="tb-content pull-left" style="width:706px;">
                    <li class="tb-item clearfix pt-10">
                        <div class="position st-unit wp-list">
                            <span
                                :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
                                v-for="(item, index) in projects.stWpdata"
                                @click.prevent="selUnitWp($event, index, item.positionId, item.positionName, item)"
                                :data-posId="item.positionId" v-if="item.rentState != 'ZY'">
                                {{item.positionName.length > 9 ? item.positionName.substr(0,8)+'...' : item.positionName}}
                                <i class="icon-Nav-contract-choice selected-icon"></i>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="button-container">
            <hl-button type="primary" @on-click="querysAdd(2)">确认添加</hl-button>
        </div>
    </section>

    <!-- 添加单元弹出层 -->
    <section class="pop" v-if="bounced.unitFlag && contactType.active == 'ER'">
        <div class="head-pop font-16"><span class="title">添加单元</span>
            <button class="fw-close absolute" @click="queryAddunit">×</button>
        </div>
        <div class="content border-b">
            <!-- 选择容器 -->
            <div class="clearfix select-row">
                <div class="pull-left clearfix">
                    <div class="pull-left hl-34 mr-10"><span class="required">*</span>选择楼宇：</div>
                    <div class="pull-left building-select unit-name">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="item in projects.builddata" @click="getBuildId(item.buildingId, item.names)">
                                    {{item.names}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="pull-left clearfix mr-10">
                    <div class="pull-left hl-34 mlr-10"><span class="required">*</span>选择楼层：</div>
                    <div class="pull-left floor-select">
                        <div class="select-ul">
                            <span class="select-name br-4 box-i-shadow">请选择</span>
                            <ul>
                                <li v-for="(item, index) in projects.floorsdata"
                                    @click="getUnit(item.floorId, item.floorName)">
                                    {{item.floorName || '--'}}</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <hl-button size="mini" @on-click="queryUnit">查询</hl-button>
            </div>
            <!-- 内容 -->
            <div class="clearfix table">
                <div class="tb-title clearfix pull-left" style="width:62px;">
                    <div class="last-unit">单元</div>
                </div>
                <ul class="tb-content pull-left" style="width:706px;">
                    <li class="tb-item clearfix pt-10" v-if="projects.unitdata.length > 0">
                        <div class="last-unit unit-active">
                            <span
                                :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
                                v-for="(item, index) in projects.unitdata" @click="selUnit($event, index, item.unitId)"
                                :data-unitId="item.unitId" v-if="item.unitType == 'BU' && item.rentState != 'ZY'">
                                {{item.unitName.length > 9 ? item.unitName.substr(0,8)+'...' : item.unitName}}
                                <i class="icon-Nav-contract-choice selected-icon"></i>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="button-container">
            <hl-button type="primary" @on-click="querysAdd(1)">确认添加</hl-button>
        </div>
    </section>

    <div class="backdrop" v-if="bounced.unitFlag"></div>
    <div class="backdrop" v-if="bounced.stFlag"></div>
    <div class="backdrop" v-if="bounced.wpFlag"></div>
    <div class="upload-file-button"></div>
    <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</section>

<script src="scripts/app/channel-name.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_create1.js" charset="utf-8"></script>

<style media="screen">
    .contract-address{
        width: 621px;
    }
    .reletbox{
        height: 40px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        font-size: 14px;
        background: rgba(233,134,103,0.23);
        border-radius: 4px;
        margin-top: 24px;
    }
    .reletbox div{
        width: 20px;
        line-height: 18px;
        text-align: center;
        border: 1px solid #e98667;
        border-radius: 2px;
        color: #E98667;
        margin-right: 10px;
    }

    .reletbox span{
        color: #999;
    }

    #ct-creat1 .hl-global-detail-box .hl-row .title {
        font-weight: 400;
        color: #666;
        line-height: 34px;
    }

    #ct-creat1 .position span {
        line-height: 34px;
    }

    #ct-creat1 .position .icon-Nav-contract-choice:before {
        position: absolute;
        right: 5px;
        top: 0px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .fileName {
        margin: 0 10px;
    }

    .fileList {
        display: flex;
        flex-wrap: wrap;
    }

    .loadprogress {
        position: fixed;
        z-index: 999999;
        left: 0;
        bottom: 0;
        height: 20px;
        width: 500px;
        font-size: 12px;
        text-indent: 3px;
        line-height: 20px;
    }


    .custom_container>div {
        display: flex;
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .custom_title {
        padding-left: 8px;
        width: 105px;
        position: relative;
    }

    .custom_title>span {
        position: absolute;
        left: 0px;
    }

    .hl-checkbox-container ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap
    }

    .hl-checkbox-container .item {
        margin-bottom: 0
    }

    .alignItems {
        align-items: flex-start !important;
    }

    .hl-radio-container li {
        margin-bottom: 10px;
    }

    .custom_container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
</style>
